<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06_v-bind</title>
  </head>

  <body>
    <!--
       在 Vue.js 中，v-bind 是用于绑定 HTML 属性的指令。通常情况下，我们在 HTML 中为属性绑定静态值。
       例如：<img src="./myimage.png"> 在这行代码中，src 属性被绑定到了一个静态值 "./myimage.png"。
       Vue.js 的 v-bind 指令可以帮助我们将属性值绑定到 Vue 实例的数据上。
       例如：<img v-bind:src="imageSrc"> 在这行代码中，v-bind 指令将 img 标签的 src 属性绑定到 Vue 实例中 data 对象的 imageSrc 属性，
       这意味着，如果您更改了 imageSrc 的值，img 标签的 src 属性也会相应地更新。

        除了内容需要动态决定外，某些属性我们也希望动态来绑定:
        比如: 动态绑定 a 标签的 href 属性；动态绑定 img 元素的 src 属性

        这时我们可以使用  v-bind 指令:
        作用: 动态绑定属性

        在开发中，有哪些属性需要动态进行绑定呢？比如:图片的链接 src、网站的链接 href、动态绑定一些类、样式等等
     -->

    <div id="app">
      <img
        v-bind:src="vueImgLogoUrl"
        :alt="vueImgAlt"
        :title="vueImgTitle"
        :width="vueImgWidth"
        :height="vueImgHeight"
      />
      <h3>
        <a v-bind:href="vueOfficalUrl">vue官网地址</a>
      <!-- 在标签上是不能使用 {{}} 表达式的，当在标签上使用动态数据时，要使用 v-bind 来绑定。-->
      <a href="{{vueOfficalUrl}}">vue官网地址1</a>
      <!-- 会报错-->
      </h3>
    </div>
  </body>
  <script src="../vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        vueImgLogoUrl: "https://cn.vuejs.org/images/logo.svg",
        vueImgAlt: "vue-logo",
        vueImgTitle: "vue-title~~",
        vueImgWidth: 200,
        vueImgHeight: 200,
        vueOfficalUrl: "https://cn.vuejs.org/",
      },
    });
  </script>
</html>
